<template>
  <div class="container">

    <div class="mainbox content">
      <ul class="clearfix nav1" style="display: flex;">
        <li style="width: 28%">
        <div style="height: 800px;" class="box">
          <zuoce />
        </div>
        </li>
        <li style="width: 40%">
          <div style=" height: 800px;">
            <ZhanjiangMap />
          </div>
        </li>
        <li style="width: 28%">
          <div class="box">   <sgbq/></div>
          <div style="height: 400px;" class="box analyze"><jdcbfx /></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import jdcbfx from '@/components/jiankong/jdcbfx.vue';
import ZhanjiangMap from '@/components/map.vue';
import sgbq from '@/components/jiankong/sgbq.vue';
import zuoce from '@/components/jiankong/zuoce.vue';
export default {
  components: {
    jdcbfx,
    ZhanjiangMap,
    sgbq,
    zuoce
  }
};
</script>

<style scoped>
.container {
  width: 1950px;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 180px;
  left: 51%;
  transform: translate(-50%);
}

.box {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.section {
  margin-bottom: 40px;
  text-align: center;
}
h2 {
  color: #ffffff;
  font-size: 24px;
  margin-bottom: 10px;
}
.image-container {
  position: relative;
  width: 400px;
  height: 300px;
  margin-bottom: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
}
.detection-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  width: 400px; /* 限制总宽度不超过图片宽度 */
  margin-left: auto;
  margin-right: auto;
}
.detection-box {
  width: 126px; /* 400px / 3 * 0.95 (留点间距) */
  height: 18px; /* 宽高比7:1 */
  border: 2px solid red;
  border-radius: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detection-box span {
  color: #ffffff;
  font-size: 12px; /* 字体较小，适应框内 */
  white-space: nowrap;
}
.info {
  color: #ffffff;
  font-size: 16px;
}
.info span {
  margin: 0 10px;
}
.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(../assets/top.png);
  background-size: cover;
  text-align: center;
}
.analyze{
  position: relative;
  top: 10px;
}
</style>